<template>
  <div id="cardBox">
    <div class="header-cont cl">
      <div class="search-box">
        <span>搜索类型：</span>
        <el-select v-model="searchForm.value1" placeholder="请选择" @change="handleChangeSearchType">
          <el-option
            v-for="item in searchForm.options1"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-select v-model="searchForm.value2" placeholder="请选择" @change="handleChangeCouponType" v-if="searchType">
          <el-option
            v-for="item in searchForm.options2"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-button @click="submitSearch" class="search-btn" v-if="searchType">搜索</el-button>
        <el-input placeholder="输入卡券名搜索" v-model="searchForm.title" @keyup.enter.native="submitSearch" v-else v-show="searchByTitle">
          <el-button slot="append" @click="submitSearch">搜索</el-button>
        </el-input>
        <el-button type="success" class="fr" @click="newCardVisible = true">+ 新建优惠券</el-button>
      </div>
      <!-- <span class="wrapper fr">
        <el-button :plain="true" type="dang @click="importCardVisible = true">导入已有券创建</el-button>
      </span> -->
    </div>
    <div class="table-data">
      <el-table
        v-loading="tbLoading"
        border
        element-loading-text="拼命加载中"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%">
        <el-table-column label="卡券类型">
          <template slot-scope="props">{{ cardTypeToText(props.row.cardType) }}</template>
        </el-table-column>
        <el-table-column label="卡券名">
          <template slot-scope="props">{{ props.row.cardTitle }}</template>
        </el-table-column>
        <el-table-column label="领券限制">
          <template slot-scope="props">{{ props.row.cardNumLimit }}</template>
        </el-table-column>
        <el-table-column label="优惠共享">
          <template slot-scope="props">{{ props.row.useTogether === 0 ? '不与其它优惠共享' : '与其它优惠共享' }}</template>
        </el-table-column>
        <el-table-column label="封面简介">
          <template slot-scope="props">{{ props.row.cardCoverDesc }}</template>
        </el-table-column>
        <el-table-column label="投放状态">
          <template slot-scope="props">{{ props.row.cardStatus === 0 ? '未投放' : '已投放' }}</template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="props">
            <el-dropdown @command="(command) => handleCommand(command, props)" trigger="hover">
              <span class="el-dropdown-link">
                -操作-<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="detail">详情</el-dropdown-item>
                <el-dropdown-item command="report">报表</el-dropdown-item>
                <el-dropdown-item command="edit" v-if="props.row.cardStatus === 0">修改</el-dropdown-item>
                <el-dropdown-item command="copy">复制</el-dropdown-item>
                <el-dropdown-item command="delete" v-if="props.row.cardStatus === 0">删除</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
          :current-page.sync="newSearchForm.page"
          :page-size.sync="newSearchForm.size"
          layout="sizes, total, prev, pager, next, jumper"
          :total.sync="totalData"
          :page-sizes="[10, 30, 50, 100]"
          @current-change="initPage()"
          @size-change="handleSizeChange">
        </el-pagination>
      </div>
    </div>
    <!-- 新建卡券弹窗 -->
    <el-dialog
      title="创建优惠券"
      :visible.sync="newCardVisible"
      width="40%">
      <el-radio-group v-model="radio">
        <el-radio :label="1">代金券<p>可为用户提供抵扣现金服务。可设置成为“满*元，减*元”，支持优惠抵扣快速买单</p></el-radio>
        <el-radio :label="2">礼品券<p>可为用户提供消费送赠品服务</p></el-radio>
        <el-radio :label="3">优惠券<p>即“通用券”</p></el-radio>
      </el-radio-group>
      <span slot="footer" class="dialog-footer">
        <el-button @click="newCardVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleChangeLabel">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 导入已有卡券弹窗 -->
    <el-dialog
      title="导入已有卡券"
      :visible.sync="importCardVisible">
      <div class="import-table-wrap">
        <el-table
          v-loading="tbLoading"
          element-loading-text="拼命加载中"
          ref="multipleTable"
          border
          :data="importData.list"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column label="卡券类型">
            <template slot-scope="props">{{ props.row.type }}</template>
          </el-table-column>
          <el-table-column label="卡券名">
            <template slot-scope="props">{{ props.row.name }}</template>
          </el-table-column>
          <el-table-column label="投放状态">
            <template slot-scope="props">{{ props.row.status }}</template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="pagination">
          <el-pagination
            :current-page.sync="importPage.page"
            :page-size.sync="importPage.size"
            layout="sizes, total, prev, pager, next, jumper"
            :total.sync="importPage.total"
            :page-sizes="[10, 30, 50, 100]"
            @current-change="getImportData()"
            @size-change="handleImportSizeChange">
          </el-pagination>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="importCardVisible = false">取 消</el-button>
        <el-button type="primary" @click="importCardVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {mapState, mapActions} from 'vuex'
export default {
  data () {
    return {
      searchForm: {
        type: 0,
        title: '',
        value1: '',
        value2: '',
        options1: [{
          value: 0,
          label: '根据卡券类型'
        },{
          value: 1,
          label: '根据卡券名'
        }],
        options2: [{
          value: 0,
          label: '代金券'
        },{
          value: 1,
          label: '礼品券'
        },{
          value: 2,
          label: '优惠券'
        }]
      },
      newSearchForm: {
        page: 1,
        size: 10,
        mark: '',
        criteria: ''
      },
      totalData: 0,
      searchType: false,
      searchByTitle: false,
      tbLoading: false,
      tableData: [],
      newCardVisible: false,
      radio: 1,
      importCardVisible: false,
      importData: {},
      multipleSelection: [],
      importPage: {
        page: 1,
        size: 10,
        total: 15
      }
    }
  },
  mounted () {
    this.initPage()
  },
  methods: {
    ...mapActions([ 'getCouponData', 'getByCondition', 'delCouponItem', 'copyCouponItem' ]),
    initPage () {
      // TODO 获取数据
      this.getCouponList()
    },
    getCouponList () {
      this.tbLoading = true
      this.getCouponData({ ...this.newSearchForm }).then((res) => {
        //console.log(res)
        if(res.data.code === 1){
          this.tbLoading = false
          this.tableData = res.data.data.list
          this.newSearchForm.page = res.data.data.page.current
          this.totalData = res.data.data.page.total
        }else {
          this.$message({
            type: 'info',
            message: res.data.msgZ
          })
        }
      })
    },
    cardTypeToText (type) {
      let typeText = '代金券'
      if(type === 0) {
        typeText = '代金券'
      }else if(type === 1){
        typeText = '礼品券'
      }else if(type === 2){
        typeText = '优惠券'
      }
      return typeText
    },
    handleCommand (command, props) {
      // console.log(command)
      if(command === 'detail' || command === 'edit'){
        //console.log(props)
        let type = props.row.cardType
        if(type === 0){
          this.$router.push({name: 'EditWxCashCard', params: {id: props.row.id}})
        }else if(type === 1){
          this.$router.push({name: 'EditWxGiftCard', params: {id: props.row.id}})
        }else{
          this.$router.push({name: 'EditWxCouponCard', params: {id: props.row.id}})
        }
        //this.$router.push({name: 'EditWxCashCard', params: {id: props.row.id}})
      }else if(command === 'delete'){
        this.delCouponItem({ id: props.row.id }).then((res) => {
          // console.log(res)
          if(res.data.code === 1) {
            this.$message({
              type: 'success',
              message: '删除成功！'
            })
            this.getCouponList()
          }else {
            this.$message({
              type: 'info',
              message: res.data.msgZ
            })
          }
        })
      }else if(command === 'copy'){
        this.copyCouponItem({ id: props.row.id }).then((res) => {
          if(res.data.code === 1) {
            this.$message({
              type: 'success',
              message: '复制成功！'
            })
            this.getCouponList()
          }else {
            this.$message({
              type: 'info',
              message: res.data.msgZ
            })
          }
        })
      }
    },
    handleSizeChange (size) {
      this.newSearchForm.size = size
      this.getCouponList()
    },
    handleChangeLabel () {
      let label = this.radio
      if(label === 1){
        // 代金券
        this.$router.push({name: 'NewWxCashCard'})
      }else if(label === 2){
        // 礼品券
        this.$router.push({name: 'NewWxGiftCard'})
      }else if(label === 3){
        // 优惠券
        this.$router.push({name: 'NewWxCouponCard'})
      }
    },
    getImportData () {
      // TODO 导入数据
    },
    handleImportSizeChange (size) {
      this.importPage.size = size
      //this.submitSearch()
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    submitSearch () {
      if(this.searchByTitle){
        this.newSearchForm.criteria = this.searchForm.title
      }
      this.getCouponData( this.newSearchForm ).then((res) => {
        if(res.data.code === 1) {
          //console.log(res)
          this.newSearchForm.page = res.data.data.page.current
          this.totalData = res.data.data.page.total
          this.tableData = res.data.data.list
        }else {
          this.$message({
            type: 'info',
            message: res.data.msgZ
          })
        }
      })
    },
    handleChangeSearchType (val) {
      // console.log(val)
      this.newSearchForm.mark = val
      if(val === 0 ){
        this.searchType = true
        this.searchByTitle = false
      }else{
        this.searchType = false
        this.searchByTitle = true
      }
    },
    handleChangeCouponType (val) {
      // console.log(val)
      this.newSearchForm.criteria = val
    }
  }
}
</script>
<style lang="scss">
  #cardBox{
    .header-cont{
      line-height: 35px;
      .search-box{
        width: 100%;
        .el-input-group{
          width: 25%;
        }
        .search-btn{
          position: relative;
          top: -1px;
        }
      }
    }
    .table-data{
      margin-top: 10px;
      .el-table th, .el-table td{
        text-align: center;
      }
      .el-dropdown{
        font-size: 12px;
        padding: 1px 8px;
        border-radius: 3px;
        border: 1px solid #ccc;
        cursor: pointer;
        .el-icon--right{
          margin-left: 15px;
        }
      }
    }
    .el-radio + .el-radio{
      margin: 10px 0;
      display: block;
    }
    .el-radio__label{
      padding-left: 10px;
      p{
        font-size: 12px;
        margin: 8px 0 0 28px;
        color: #666;
      }
    }
    .el-dialog{
      width: auto;
    }
  }
</style>


